<template>
	<view class="container">
		<uni-grid class="ctgsHot" :column="4" :showBorder="false">
			<uni-grid-item v-for="ctg in ctgsHot" :key="ctg.id">
				<view class="ctgshot-item">
					<navigator :url="`/pages/posts/posts?is_hot=true&title=${ctg.sub_name}&ctg_id=${ctg.id}`">
						<text class="ctgshot-subname">{{ctg.sub_name}}</text>
					</navigator>
					<text class="ctgshot-desc">{{ctg.desc}}</text>
				</view>

			</uni-grid-item>
		</uni-grid>

		<!--  -->
		<uni-grid :column="2">
			<uni-grid-item v-for="ctg in ctgsMain" :key="ctg.id">
				<navigator :url="`/pages/posts/posts?title=${ctg.name}&ctg_id=${ctg.id}`">
					<text class="text">{{ctg.name}}</text>
				</navigator>
			</uni-grid-item>
		</uni-grid>

		<!--  -->

		<uni-grid :column="3">
			<uni-grid-item v-for="area in areas" :key="area.id">
				<text class="text">{{area.name}}</text>
			</uni-grid-item>
		</uni-grid>

	</view>
</template>

<script setup>
	import {
		computed,
		ref
	} from 'vue';
	import {
		getAreasApi,
		getCtgsApi
	} from '../../api/index.js';


	const ctgs = ref([]);
	const areas = ref([]);

	const ctgsHot = computed(() => ctgs.value.filter(el => el.is_hot))

	const ctgsMain = computed(() => ctgs.value.filter(el => el.is_main))

	async function getCtgs() {
		const res = await getCtgsApi();
		ctgs.value = res.data.items;
	}
	getCtgs();

	async function getAreas() {
		const res = await getAreasApi();
		areas.value = res.data.items;
	}

	getAreas();
</script>

<style lang="scss">
	.container {
		padding: 20px;
		/* 	font-size: 14px;
		line-height: 24px; */
	}

	.ctgsHot {
		display: flex;
		flex-direction: column;

		.ctgshot-item {
			margin: 5px;
			flex-grow: 1;
			background: #FFFFFF;
			box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.08);
			border-radius: 2px;

			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;

			.ctgshot-subname {
				font-size: 28rpx;
			}

			.ctgshot-desc {
				font-size: 22rpx;
				color: #BBBBBB;
			}
		}
	}
</style>